<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8">
    <title>無題のページ</title>
    <style type="text/css">
    body {
         text-align:center;
        }
        .warp
        {
         margin:0 auto;
         width:900px;
         }
         
        /*****************菜单**************************/
        .nav
        {
         height:20px;
         z-index:100;
         position:relative;
         }
        /****************一级菜单**************************/
        .level1
        {
         margin:0;
         padding:0;
         }
        .level1 li
        {
         margin:0;
         padding:0;
         display:inline;
         border:solid 1px red;
         float:left;
         position:relative;
         padding:0 100px;
         }
        /****************二级菜单**************************/
        .level2
        {
         margin:0;padding:0;position:absolute;
         top:20px;
         left:0px;
         position:absolute;
         display:none;
         }
        .level2 li
        {
         margin:0;
         padding:0;
         display:block;
         clear:both;
         border:solid 1px red;
         width:150px;
         }
        /****************三级菜单**************************/
        .level3
        {
         margin:0;padding:0;position:absolute;
         top:10px;
         left:150px;
         display:none;
         }
        .level3 li
        {
         margin:0;
         padding:0;
         display:block;
         border:solid 1px red;
         }
        /*****************被遮盖的层**************************/
        .banner
        {
         margin:0 auto;
         width:900px;
         background-color:#cccccc;
         z-index:0;
         }
    </style>
    <script language="javascript" src="../../vendor/jquery1.3.2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
$(document).ready(function (){
	//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
	$('.level2').attr('isopen','false');
	$('.level3').attr('isopen','false');     
	//一级菜单鼠标经过时
	$('.level1>li').mouseover(function (){
		//如果该一级菜单下的二级菜单的isopen为false
		if($(this).children(".level2").attr('isopen')=='false'){
			//所有该一级菜单下”之外“的二级菜单隐藏，加上isopen为false
			$(".level2:not($(this).children('.level2'))").attr('isopen','false').slideUp("normal");
			//所有三级菜单隐藏，加上isopen为false
			$(".level3").attr('isopen','false').slideUp("normal");
             
			//该一级菜单下的二级菜单弹出，加上isopen为true
			$(this).children(".level2").attr('isopen','true').slideDown("normal");
		}
	}); 
         
      //二级菜单鼠标经过时   
	$('.level2>li').mouseover(function (){
		//如果该二级菜单下的三级菜单的isopen为false
		if($(this).children(".level3").attr('isopen')=='false'){
			//所有该二级菜单下”之外“的三级菜单隐藏，加上isopen为false
			$(".level3:not($(this).children('.level3'))").attr('isopen','false').slideUp("normal");     
			//该二级菜单下的三级菜单弹出，加上isopen为true
			$(this).children(".level3").attr('isopen','true').slideDown("normal");
		}
	});
	//无下级菜单鼠标经过时   
	$('.levelno').mouseover(function (){
		//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
		$(".level2").attr('isopen','false').slideUp("normal");
		$(".level3").attr('isopen','false').slideUp("normal");
	});
});
    </script>
</head>
<body>
        <div class="warp">
            <div class="nav">
                <ul class="level1">
                    <li>一级
                        <ul class="level2">
                            <li>二级
                                <ul class="level3">
                                    <li>三级</li><li>三级</li></ul>
                            </li>
                            <li>二级
                                <ul class="level3">
                                    <li>三级</li><li>三级</li></ul>
                            </li>
                        </ul>
                    </li>
                    <li>一级
                        <ul class="level2">
                            <li>二er级</li>
                            <li>二er级</li>
                        </ul>
                    </li>
                    <li class="levelno">一级</li>
                </ul>
            </div>
            <div class="banner">
            </div>
        </div>
</body>
</html>